<template>
    <div class="LoginBox">
        <div class="logo">
            <img src="@/assets/pig.png">
        </div>
        <el-form class="LoginForm" label-width="100px" :model="RegForm"> 
            <el-form-item label="用户名">
                <el-input v-model="RegForm.nickname" />
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="RegForm.phone" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="RegForm.password" />
            </el-form-item>
            <el-form-item label="重复密码">
                <el-input type="password" v-model="RegForm.rePassword" />
            </el-form-item>
            <el-form-item label="验证码">
                <el-input v-model="RegForm.numberCode" />
            </el-form-item>
            <div class="btns" >
                <el-button @click="getYZM()" class="codeBtn">
                    获取验证码
                </el-button>
                <el-button @click="Register()">
                    <i class="iconfont icon-xianxingyoujiantou"></i>
                </el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import router from "@/router";
import { useStore } from "vuex" 
import { reactive } from "vue"
const store = useStore()

const RegForm = reactive({
    nickname:"",
    phone: "",
    password: "",
    rePassword:"",
    numberCode:""
});
const Register =()=>{
  store.dispatch("user/userRegister",RegForm).then(res=>{
    console.log(res);
    if(res.code==200){
        alert("注册成功")
        router.push('/login')
    }
  },error=>{
    alert("注册失败")
  })
}
const getYZM=()=>{
  alert('获取验证码')
  store.dispatch("user/getCode",RegForm.phone)
}
</script>

<style lang="scss" scoped>
.LoginBox {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #999;
    color: #fff;
    padding: 0.7rem 0px;
    background: url("@/assets/background.png");
    img{
        width: 1.6rem;
        height: 1.7rem;
        border-radius:50%;
        background-color: rgb(178,221,244);
    }
  
}
.LoginForm {
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    width: 90%;
    :deep(.el-form-item__label){
        display: flex;
        justify-content: center;
        align-items: center;
        height: 0.5rem;
        font-size: 0.2rem;
        font-weight: 500;
        color: #fff;
    }
    :deep(.el-button) {
        width: 1.5rem;
        height: 0.8rem;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 0.4rem;
        i{
        font-size: 0.4rem;
        font-weight: bold;
        color: #82bd24;
        }
    }
    .codeBtn{
        background-color: #8BCE1F;
        color: #fff;
        font-size: 0.2rem;
        font-weight: bold;
        border: 0px;
    }
}
.el-input{
    width: 2.2rem;
    height: 0.5rem;
    ::v-deep .el-input__wrapper{
        background-color: rgba( 255, 255, 255, 0.6 );
        border-radius: 0.25rem;
        padding: 0rem 0.1rem;
        .el-input__inner{
            text-align: center;
            font-size: 0.18rem;
        }
    }
}  
</style>